<template>
	<view class="details">
		<view class="" style="width: 100%; height: 500rpx;">
			<image :lazy-load="true" :src="item.img" mode="" style="width: 100%;height: 500rpx;margin: 0 auto;"></image>
		</view>
		<view class="text" style="padding: 20rpx;">
			<view class="" style="font-size: 50rpx;margin: 10rpx;color: #0285ff;">
				{{item.title}}
			</view>
			<view class="" style="margin: 10rpx">
				评分：<u-rate :count="count" v-model="item.score"></u-rate>{{item.score}}
			</view>
			
			<text>{{item.text}}</text>
		</view>
		<view class="" style="padding: 20rpx;">
			<u-section title="景点门票" :right="false" color="#0285ff" font-size="40" style="margin: 10rpx;"></u-section>
			
			<view class="" style="width: 100%;text-align: left;font-size: 30rpx;border-bottom: 1rpx solid #DCDFE6;" v-for="(peo,index) in item.people" :key="index">
				{{peo.people}}
				<view class="" style="display: flex;">
					<text class="" style="flex: 5;text-align: right;font-size: 30rpx;color: #FA3534;margin: 20rpx;">
						￥{{peo.price}}元
					</text>
					<u-button shape="circle" size="mini" type="warning" style="flex: 1;" @click="reserve(peo)">立即预订</u-button>
				</view>
			</view>
			
		</view>
		
		<view class="">
			<u-section title="景点实景" :right="false" color="#0285ff" font-size="40" :bold="true" style="margin: 10rpx;"></u-section>
			<view class="">
				<image :src="item.img" mode=""></image>
				<image :src="item.img1" mode=""></image>
				<image :src="item.img2" mode=""></image>
			</view>
		</view>
		<view class="">
			<u-section title="游客评论" :right="false" color="#0285ff" font-size="40" :bold="true" style="margin: 10rpx;"></u-section>
			<view class="" style="margin: 20rpx;border-bottom: 1rpx solid #DCDFE6;">
				<u-rate :count="count" v-model="item.score"></u-rate>{{item.score}}
				<view class="">
					{{item.text}}
				</view>
				<view class="img">
					<image :src="item.img" mode=""></image>
					<image :src="item.img1" mode=""></image>
				</view>
			</view>
			<view class="" style="margin: 20rpx;border-bottom: 1rpx solid #DCDFE6;">
				<u-rate :count="count" v-model="item.score"></u-rate>{{item.score}}
				<view class="">
					{{item.text}}
				</view>
				<view class="img">
					<image :src="item.img" mode=""></image>
					<image :src="item.img1" mode=""></image>
				</view>
			</view>
		</view>
	
		<u-popup v-model="show" mode="bottom" border-radius="14" length="80%" width="100%" :closeable="true">
			<view class="u-p-20">
				<view class="u-font-40 u-m-20">{{tickets.people}}</view>
				<u-line/>
				
				<view class="u-m-20">
					<text class="u-font-35">购票须知</text>
				</view>
				<u-section title="预订说明" :right="false" color="#0285ff" font-size="30"></u-section>
				<view class="u-m-10">
					{{tickets.text1}}
				</view>
				<view class="u-m-10">
					{{tickets.text2}}
				</view>
				<view class="u-m-10">
					注意：
				</view>
				<view class="u-m-10">
					{{tickets.text3}}
				</view>
				
				<u-section title="使用说明" :right="false" color="#0285ff" font-size="30"></u-section>
				<view class="u-m-10">
					凭购票信息进入
				</view>
				<u-section title="退款说明" :right="false" color="#0285ff" font-size="30"></u-section>
				<view class="u-m-10">
					请在进入时间的前2小时进行退票，无须支付手续费，超时抽取20%手续费，感谢您的理解！
				</view>
				<u-section title="费用说明" :right="false" color="#0285ff" font-size="30"></u-section>
					<view class="u-m-10">
						{{tickets.people}}一张
					</view>
				<u-section title="联系客服" :right="false" color="#0285ff" font-size="30"></u-section>
					<view class="u-m-10">
						电话：8888-8888
					</view>
				
			</view>
			<u-sticky offset-top="850" style="width: 100%;">
				<view class="u-flex u-row-between" style="width: 700rpx;margin-left: 30rpx;">
					<view>
					票价：
					</view>
					<view class=" $u-type-error">
					{{tickets.price}}
					</view>
					<view>
					数目：<u-number-box v-model="value" @change="valChange"></u-number-box>
					</view>
					<view class="">
						<u-button @click="fastreserve(tickets)" type="warning" >立即预订</u-button>
					</view>
					
				</view>
			</u-sticky>
		</u-popup>
	</view>
	<u-toast ref="uToast" />
	<u-popup v-model="show1" mode="center" :closeable="true" width="500" height="300" border-radius="20" style="text-align: center;">
		<view style="padding-top: 100rpx;padding-bottom: 20rpx;">登录才能预订</view>
		<u-button @click="login" type="warning" size="mini">去登录</u-button>
	</u-popup>
	<u-divider>到底了</u-divider>
</template>

<script>
	export default {
		data() {
			return {
				item:{},
				count:5,
				show:false,
				tickets:{},
				value: 1,
				show1:false
			}
		},
		methods: {
			login(){
				uni.navigateTo({
				    url: '/pages/mine/login/login'
				})
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			reserve(x){
				this.show=true
				this.tickets=x
			},
			fastreserve(y){
				let that=this
				console.log(this.$store.state.userInfo.order)
				
				uni.getStorage({
					key: 'userInfo',
					success: function (res) {
						that.isLogin=res.data.isLogin
						if(that.isLogin){
							that.show1=false
							that.$store.state.userInfo.order.unshift({
								"people": y.people,
								"price": y.price,
								"num":that.value,
								"title":that.item.title,
								"img":that.item.img
							}) 
							uni.setStorage({
								key: 'userInfo',
								data: that.$store.state.userInfo,
								success: function () {
									console.log('success');
								}
							});
							that.show=false
							that.$refs.uToast.show({
								title: '预订成功',
								type: 'success',
								url: '/pages/mine/orderlist/orderlist',
							
							})
						}else{
							that.show1=true
						}
					},
					fail: (err) => {
						// console.error(err,11);
						that.show1=true
					},
				});
				
				
			}
		},
		onLoad(option) {
			this.item=JSON.parse(decodeURIComponent(option.item))
		}
	}
</script>

<style>
	.img image{
		width: 300rpx;
		height: 200rpx;
		margin: 10rpx;
	}
</style>
